	<script src="resources/js/jquery.ui.widget.js" type="text/javascript"> </script>
	<script src="resources/js/jquery.iframe-transport.js"></script>
	<script src="resources/js/jquery.fileupload.js"></script>
	
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
	<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
	
	<script type="text/javascript">

	
	</script>


<div id="cc" class="easyui-layout" style="width:100%;height:680px;">   

    <div data-options="region:'west',title:'Customer/Order Info.',split:true" style="width:620px;">
		<div class="fitem" style="white-space: nowrap; padding: 5px; ">
				<table style="cellpadding: 0px; cellspacing: 0px; width: 400px; border: 0px; border-style: solid; float: left;">

					<tr><td><label style="padding-left: 10px; min-width: 30px; width: 120px;">CUSTOMER NAME:</label></td><td style="padding-top: 4px;"><c:out value="${order.customerName}" /></td></tr>
					<tr><td><label style="padding-left: 10px; min-width: 30px; width: 70px;">CONTACT:</label></td><td style="padding-top: 4px;"><c:out value="${order.contact}" /></td></tr>
					<tr><td style="vertical-align: top;"><label	style="padding-left: 10px; min-width: 30px; width: 120px;">ADDRESS:</label></td><td style="padding-top: 4px;">
							<address>
								<c:out value="${order.address1}" />
								<br>
								<c:if test='${fn:length(order.address2)>0}'>
									<c:out value="${order.address2}" />
									<br>
								</c:if>
								<c:out value="${order.city}" />
								,
								<c:out value="${order.state}" />
								<c:out value="${order.zip}" />
							</address>
						</td>
					</tr>
					<tr>
						<td><label style="padding-left: 10px; min-width: 30px; width: 70px;">TEL:</label></td>
						<td style="padding-top: 4px;"><c:out value="${order.tel}" /></td>
					</tr>

					<tr>
						<td><label style="padding-left: 10px; min-width: 30px; width: 70px;">EMAIL:</label></td>
						<td style="padding-top: 4px;"><c:out value="${order.email}" /></td>
					</tr>
					<tr>
						<td><label style="padding-left: 10px; min-width: 30px; width: 70px;">Order Date:</label></td>
						<td style="padding-top: 4px;"><fmt:formatDate value="${order.datePurchased}" pattern="MM/dd/yyyy" /></td>
					</tr>
					<tr>
						<td><label	style="padding-left: 10px; min-width: 30px; width: 70px;">Due Date:</label></td>
						<td style="padding-top: 4px;"><fmt:formatDate value="${order.estPickupDate}" pattern="MM/dd/yyyy" /></td>
					</tr>
					<tr>
						<td><label	style="padding-left: 10px; min-width: 30px; width: 70px;">&nbsp;</td>
						<td style="padding-top: 4px;">&nbsp;</td>
					</tr>
				</table>
				
				<div id="p" class="easyui-panel" title="Order Details"  style="width:600px;padding:0px;background:#fafafa;"  data-options="">
					<table id="items_list" 	style="cellpadding: 0px; cellspacing: 0px; width: 595px; border: 0px; border-style: solid;"></table>
				</div>
		</div>

	</div>
    <div data-options="region:'center'" style="padding:0px;background:#eee;">
    	<div id="cc" class="easyui-layout" style="width:100%;height:100%;">
    		<div data-options="region:'north',title:'Upload Files',split:true" style="height:300px; padding: 10px">
    			<form id="uploadFileForm" name="uploadFileForm" method="post" action="uploadFile" enctype="multipart/form-data" >
					<input type="hidden" id="whatFileType" name="whatFileType" value="$('#fileType').combobox('getValue')">
					<input type="hidden" id="orderId" name="orderId" value="${order.orderId}">
					<input type="hidden" id="customerId" name="customerId" value="${order.customerId}">
					<div class="fitem">
					<table border="0" >
					<tr><td><label style="width: 80px; margin-top:5px; vertical-align: bottom;">FILE TYPE:</label></td>
						<td style="padding: 5px;" colspan="2">
							<select id="fileType" class="easyui-combobox" name="fileType" style="width:200px;" data-options="required: true, onSelect: changeFileType" valueField="fileType" textField="text" >
							    <option value="Art Approval">Art Approval</option>
							    <option value="Left Chest Logo">Left Chest Logo</option>
							    <option value="Full Front Logo">Full Front Logo</option>
							    <option value="Full Back Logo">Full Back Logo</option>
							    <option value="Left Sleeve Logo">Left Sleeve Logo</option>
							    <option value="Right Sleeve Logo">Right Sleeve Logo</option>
							</select>
						</td>
					</tr>						
					
					<tr>					
					<td style="vertical-align: top;"><label style="width: 80px; margin-top:10px;">NOTES:</label></td>
				    <td style="padding: 5px;"><textarea id="inkNotes" name="inkNotes"  style="height:100px;width:200px; margin-top:5px;" title="The ink colors description can be put it here." class="easyui-tooltip"></textarea></td>
					<td style="vertical-align: top; padding-top: 10px;  font-style: italic; font: arial">If you upload the logo, make sure you write Ink Colors, Screen Mesh information here.</td> 
					</tr>
					
					<tr>
						<td><label style="width: 50px; margin-top:5px;">FILE:</label></td>
						<td align="left" colspan="2">			
			        	<input id="fileupload" type="file" name="files[]" data-url="fileUpload.json" >
						</td>
					</tr>
					
					</table>
					</div>
				</form>
    		</div>
    		
    		<div data-options="region:'center',title:'Files'" style="padding:5px;background:#eee;">
    		 	<div class="zzant_table" >
			    <table id="uploaded-files" style="height: 100%;">
			        <tr>
			            <td>Image</td>
			          	<td>File Type</td>
			            <td>Ink Notes</td>
			            <td>File Directory</td>
			            <td>File Name</td>
			            <td colspan="2" style="text-align: center;">Action</td>
			            
			        </tr>
			        
			        <c:forEach items="${fileList}" varStatus="s" var="file" >
						<tr id='<c:out value="${file.fileId}" />_row'>
							<td><img src="data:image/jpg;base64,<c:out value='${file.byteArrayString}'/>" height='45' onclick="$('#picwin').window('open'); $('#original_pic').attr('src',this.src);"  /></td>
							<td><c:out value="${file.fileType}" /></td>
							<td><c:out value="${file.inkNotes}" /></td>
							<td><c:out value="${file.fileDir}" /></td>
							<td>&nbsp;<c:out value="${file.fileName}" /></td>							
							<td> <a href="#" class="easyui-linkbutton" data-options="plain:false, size:'small'" onclick='removePic(<c:out value="${file.fileId}" />);'>Remove</a></td>
							<td> <a href='getFile/<c:out value="${file.fileId}" /> ' class="easyui-linkbutton" data-options="plain:false, size:'small'" >download</a></td>
 						</tr>
					</c:forEach>
			        
			    </table>
    			</div>
    	</div>    
    </div>
</div>
</div>

<div id="picwin" class="easyui-window" title="Image Window" style="width:1024px;height:860px;padding: 10px;"
        data-options="iconCls:'icon-save',modal:true, closed: true, minimizable: false, collapsible: false, draggable: true, resizable: true">
    <img id="original_pic" src="" style="display: block; margin-left: auto;  margin-right: auto; height: 800px;" />
</div>

<script type="text/javascript">
function changeFileType(){
	// alert ($('#fileType').combobox('getValue'));
	// $('#whatFileType').val($('#fileType').combobox('getValue'));
	// alert ($('#whatFileType').val());
	//  alert($('#fileupload').formData);
}

$(document).ready(function () {
	$('#items_list').datagrid('reload',{ 
		orderId: $('#orderId').val()
    });
   	 
});

$('#items_list').datagrid({  
    url:'getOrderItemsByOrderId.json',
    method: 'GET',
    queryParams: {
		orderId: $('#orderId').val()						
	},
    rownumbers: true,
    fitColumns: true,
    nowrap: false,
    remoteSort: false,
    striped: true,
    singleSelect: true,    
columns:[[					
        {title:'Style No.',field:'styleNo',align:'left', sortable:true}, 
        {title:'Product Description',field:'desc',align:'left'}, 
        {title:'Art Description',field:'artDesc',align:'center'},
        {title:'Color',field:'color',align:'center', sortable:true},
        {title:'Size',field:'size',align:'center', sortable:true},			        
        {title:'Qty',field:'qty',align:'center'}
    ]]// ,end of columns
    
});

function removePic(fileId){
	//alert (fileId);
    if (fileId){  
       $.post('removeFile.json/'+fileId+'/'+$('#orderId').val(),function(result){  
            if (result.success){  
          		//reload the dataGrid
            	// $(dataGridName).datagrid('reload');

		          $.messager.show({
		          	title: 'Result',
		          	timeout: 3000,
		          	msg: 'Item has been removed successfully.',
		              style:{
		                  right:'',
		                  top:document.body.scrollTop+document.documentElement.scrollTop,
		                  bottom:''
		              }
		          });
		          //remove the row on the page
		          var rowId = "#"+fileId + "_row";
		          $(rowId).remove(); 
		          
		          
            } else {		                    	
                $.messager.alert({   // show error message  
                    title: 'Error',		                            
                    width: 400,
                    height: 200,
                    html: result.msg
                    // msg: result.msg  
                });  
            }  
        },'json');		          
    }else{
    	$.messager.alert('Alert','File ID cannot be found.');
    	return false;
    } 
	
}





$(function () {
    $('#fileupload').fileupload({
    	dataType: 'json',
    	formData: {customerId: $('#customerId').val(),orderId: $('#orderId').val()}, 
    	allowedTypes:"png,gif,jpg,jpeg,bmp",
    	done: function (e, data) {
            // $("tr:has(td)").remove();
            // alert ($('#fileType').combobox('getValue'));
            $.each(data.result, function (index, file) { 
            	// alert (file.fileId);
            	// alert("<img src='data:image/png;base64,"+file.bytes+"' height='45' onclick='$('#picwin').window('open'); $('#original_pic').attr('src',this.src);' >");
                $("#uploaded-files").append(
                        $('<tr id='+ file.fileId +'_row/>')
                        .append($('<td/>').html("<img src='data:image/png;base64,"+file.bytes+"' height='45' >"))
                        .append($('<td/>').text(file.fileType))
                        .append($('<td/>').text(file.inkNotes))
                        .append($('<td/>').text(file.fileDir))
                        .append($('<td/>').text(file.fileName))                        
                        .append($('<td/>').html("<a href='#' class='easyui-linkbutton data-options='plain:false, size:'small' onclick='removePic(" + file.fileId+");'>Remove</a>"))
                        .append($('<td/>').html("<a href='getFile/"+file.fileId+"' class='easyui-linkbutton data-options='plain:false, size:'small'>download</a>"))
                        )
            }); 
        },
 
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }// ,
 
        // dropZone: $('#dropzone')
    }).bind('fileuploadsubmit', function (e, data) {
        data.formData = {
        		fileType: $('#fileType').combobox('getValue'), inkNotes: $('#inkNotes').val(), customerId: $('#customerId').val(),orderId: $('#orderId').val()
            };
    });
});

// fileUpload.json
</script>